<template>
	<div id="equiment">
		<!-- <el-table :data=" tableData.filter((data) =>!search || data.name.toLowerCase().includes(search.toLowerCase()))" style="width: 100%"> -->
		<el-table :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)" style="width: 100%">
			<!-- 搜索功能 -->
			<!--  -->
			<el-table-column label="Id" prop="id"></el-table-column>

			<el-table-column label="Name" prop="name"></el-table-column>

			<el-table-column label="Location" prop="location"></el-table-column>

			<el-table-column label="Address" prop="address"></el-table-column>

			<el-table-column align="right">
				<template slot="header">
					<!-- 修改：因为vue报错将slot-scope="scope"改为slot-scope="" -->
					<el-input v-model="search" size="mini" placeholder="输入名称搜索" />
				</template>
				<!----> 
				<template slot-scope="scope">
					<!--作用域插槽-->
					<el-button size="mini" @click="showEdit(scope.$index, scope.row)">编辑</el-button>
					<el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
					<!--修改设备弹出框-->
					<el-dialog title="修改设备" :visible.sync="editVisible" @close="dialogClose('ruleForm')">
						<el-form ref="ruleForm" :rules="rules" :model="editForm" class="demo-ruleForm">
							<el-form-item label="设备id" :label-width="formLabelWidth" prop="id">
								<el-input v-model="editForm.id" disabled="disabled" autocomplete="off"></el-input>
							</el-form-item>
							<el-form-item label="设备名称" :label-width="formLabelWidth" prop="name">
								<el-input v-model="editForm.name" autocomplete="off"></el-input>
							</el-form-item>
							<el-form-item label="城市" :label-width="formLabelWidth" prop="location">
								<el-input v-model="editForm.location" autocomplete="off"></el-input>
							</el-form-item>
							<el-form-item label="详细地址" :label-width="formLabelWidth" prop="address">
								<el-input v-model="editForm.address" autocomplete="off"></el-input>
							</el-form-item>
							<el-form-item label="状态" :label-width="formLabelWidth" prop="status">
								<el-switch v-model="editForm.status" :active-value="1" inactive-value="0"></el-switch>
							</el-form-item>
						</el-form>
						<div slot="footer" class="dialog-footer">
							<el-button @click="editVisible = false">取 消</el-button>
							<el-button type="primary" @click="putEdit">确 定</el-button>
						</div>
					</el-dialog>
				</template>
				<!--修改设备弹出框-->
			</el-table-column>
		</el-table>
		<!--添加设备-->
		<!-- <template> -->
		<div>
			<el-button type="text" @click="dialogVisible = true">添加设备</el-button>
			<el-dialog title="添加设备" :visible.sync="dialogVisible" @close="dialogClose('form')">
				<el-form ref="form" :rules="rules2" :model="form" label-width="80px" class="demo-ruleForm">
					<el-form-item label="设备名称" prop="name">
						<el-input v-model="form.name"></el-input>
					</el-form-item>
					<el-form-item label="位置" prop="location">
						<el-input v-model="form.location"></el-input>
					</el-form-item>
					<el-form-item label="地址" prop="address">
						<el-input v-model="form.address"></el-input>
					</el-form-item>
				</el-form>
				<span slot="footer" class="dialog-footer">
					<el-button @click="dialogVisible = false">取 消</el-button>
					<el-button type="primary" @click="onSubmit">确 定</el-button>
				</span>
			</el-dialog>
		</div>
		<!-- </template> -->
		<div class="block">
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[10, 20, 30, 40, 50]" :page-size="pagesize" :total="tableData.length" layout="total, sizes, prev, pager, next, jumper">
			</el-pagination>
		</div>
	</div>
</template>

<script>
	export default {
		name: "equipment",
		mounted() {
			var that = this;
			this.axios({
				method: "get",
				url: "http://47.115.152.5:8080/manage/devices/list.do", //查看所有接口
				withCredentials: true, //跨域请求 在跨域请求时，会携带用户凭证
			}).then(function(res) {
				that.tableData = res.data.data;
				//console.log(res.data.data[0].status);
			});
		},
		data() {
			return {
				// search:"",
				tableData: [],
				form: {
					//添加设备表单
					name: "",
					location: "",
					address: "",
				},
				editForm: {
					//修改设备表单
					id: "",
					name: "",
					location: "",
					address: "",
					status: "",
				},
				deleteId: "",
				deletekey: "", //被删除设备的索引
				editVisible: false, //修改设备弹出框
				formLabelWidth: "120px",
				dialogVisible: false, //添加设备弹出框
				search: '',
				// Fruit_Search: "",
				// paydata_Search: "",
				insertGoodsVisible: false,
				tips: [ //
					"修改设备信息失败",
					"添加设备失败",
					"删除设备失败",
					"删除商品失败",
					"用户名或密码错误",
					"商品更新失败",
					"商品新增失败",
					"修改设备信息成功", //7
					"添加设备成功",
					"删除设备成功",
					"删除商品成功",
					"登录成功", //11
					"更新商品成功",
					"新增商品成功"
				],
				currentPage: 1,
				pagesize: 10,
				rules: {//验证规则
					name: [{
						required: true,
						message:'请说明设备名称'
					}],
					location:[{
							required: true,
							message:'请说明所在城市'
						}],
					address:[{
							required: true,
							message:'请说明地址'
						}]
				},
				rules2: {//验证规则
					name: [{
						required: true,
						message:'请说明设备名称'
					}],
					location:[{
							required: true,
							message:'请说明所在城市'
						}],
					address:[{
							required: true,
							message:'请说明地址'
						}]
				}
			};
		},
		methods: {
			showEdit(key, keyPath) {
				//修改设备信息
				
				this.editForm.id = keyPath.id;
				this.editForm.name = keyPath.name;
				this.editForm.location = keyPath.location;
				this.editForm.address = keyPath.address;
				this.editForm.status=keyPath.status;
				console.log(keyPath.status);
				this.editVisible = true;
			},
			putEdit() {
				//提交设备修改
				this.editVisible = false;
				var that = this;
				this.axios({
					method: "POST",
					url: 'http://47.115.152.5:8080/manage/devices/save.do',
					params: {
						id: that.editForm.id,
						name: that.editForm.name,
						location: that.editForm.location,
						address: that.editForm.address,
						status: Number(that.editForm.status)
						//有修改
					},
					withCredentials: true,
				}).then(function(res) {
					if (res.data.status == 0) {
						that.doit();
						that.susTips(7);
					} else {
						that.errTips(0);
					}
				});
			},
			handleDelete(key, keyPath) {
				//删除设备信息
				var that = this;
				that.deleteId = keyPath.id; //被删除设备的id
				that.deletekey = key; //被删除设备的索引值
				this.axios({
					method: "POST",
					url: "http://47.115.152.5:8080/manage/devices/del_machine.do",
					params: {
						deviceId: that.deleteId,
					},
					withCredentials: true,
				}).then(function(res) {
					if (res.data.status == 0) { //0  删除成功
						that.doit(); //如果不用doit，可以用splice删除tableData的某一项.
						that.susTips(9);
					} else {
						that.errTips(2);
					}
				});
			},
			onSubmit() {
				//添加设备
				var that = this;
				that.dialogVisible = false; //点击取消和确定按钮后不可见
				this.axios({
					method: "POST",
					url: "http://47.115.152.5:8080/manage/devices/save.do",
					params: {
						name: that.form.name,
						location: that.form.location,
						address: that.form.address,
					},
					withCredentials: true,
				}).then(function(res) {
					/*
				that.tableData[that.tableData.length] = {//给数组末尾添加元素
					id: '',
					name: that.form.name,
					location: that.form.location,
					address: that.form.address
				};*/
					if (res.data.status === 0) {
						that.doit();
						that.susTips(8);
					} else {
						that.errTips(1);
					}
				});
				that.form.name = "";
				that.form.location = "";
				that.form.address = "";
				//请空表单
			},
			login: function() {
				var that = this;
				this.axios({
					method: "post",
					url: "http://47.115.152.5:8080/admin/login.do",
					params: {
						username: "admin",
						password: "admin",
					},
					withCredentials: true,
				}).then(function(res) {
					//console.log(res.data.msg);
					if (res.data.msg == "登录成功！") {
						//var i=that;
						//console.log(res);
						//console.log(res.request.responseURL)
						//console.log(res.data)
						//   console.log(cookie);
						that.susTips(11);
					} else {
						that.errTips(4);
					}
				});
			},
			doit: function() {
				var that = this;
				this.axios({
					method: "get",
					url: "http://47.115.152.5:8080/manage/devices/list.do", //查看所有接口
					withCredentials: true, //跨域请求 在跨域请求时，会携带用户凭证
				}).then(function(res) {
					that.tableData = res.data.data;
					//console.log(res.data);
				});
			},
			errTips(option) { //错误信息提示
				this.$notify.error({
					title: '错误',
					message: this.tips[option]
				});
			},
			susTips(option) { //成功信息提示
				this.$notify({
					title: '成功',
					message: this.tips[option],
					type: 'success'
				});
			},
			dialogClose(typename) {
				this.$refs[typename].resetFields(); // 这里就是重置表单了~
				// this.editVisible = false;
				// this.dialogVisible = false;
			},
handleSizeChange(val) {
this.pagesize = val;
},
handleCurrentChange(currentPage) {
this.currentPage = currentPage;
}
		},
	};
</script>

<style>
</style>
